<template>
    <div style="color: #fff">
        <!--    搜索表单-->
        <div style="margin-bottom: 20px">
            <el-input style="width: 240px" placeholder="请输入图书名称" v-model="params.bookName"></el-input>
            <el-input style="width: 240px; margin-left: 5px" placeholder="请输入图书标准码"
                      v-model="params.bookId"></el-input>
            <el-button style="margin-left: 5px" type="primary" @click="load"><i class="el-icon-search"></i> 搜索
            </el-button>
            <el-button style="margin-left: 5px" type="warning" @click="reset"><i class="el-icon-refresh"></i> 重置
            </el-button>
        </div>

        <el-table :data="data.records" stripe row-key="id" default-expand-all>
            <el-table-column prop="id" label="编号" width="80"></el-table-column>
            <el-table-column prop="bookName" label="图书名称"></el-table-column>
            <el-table-column prop="bookId" label="图书标准码"></el-table-column>
            <el-table-column prop="borrowDate" label="借出日期"></el-table-column>
            <el-table-column prop="dueDate" label="应还日期"></el-table-column>
            <el-table-column prop="returnDate" label="归还日期"></el-table-column>
            <el-table-column prop="status" label="借出状态"></el-table-column>
            <el-table-column prop="returnDate" label="归还日期"></el-table-column>
            <el-table-column prop="note" label="过期提醒">
                <template v-slot="scope">
                    <el-tag type="success" v-if="scope.row.status === '待还'">{{ scope.row.status }}</el-tag>
                    <el-tag type="warning" v-if="scope.row.status === '已还'">{{ scope.row.status }}</el-tag>
                    <el-tag type="danger" v-if="scope.row.status === '逾期'">{{ scope.row.status }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="管理">
                <template v-slot="scope">
                    <el-button type="primary" @click="returnBooks(scope.row)" v-if="scope.row.status !== '已还'">还书
                    </el-button>
                </template>
            </el-table-column>
            <!--      <el-table-column prop="updatetime" label="更新时间"></el-table-column>-->
        </el-table>

        <!--    分页-->
        <div style="margin-top: 20px">
            <el-pagination
                    background
                    :current-page="data.current"
                    :page-size="data.size"
                    layout="prev, pager, next"
                    @current-change="handleCurrentChange"
                    :total="data.total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import request from "@/utils/request";
import Cookies from 'js-cookie'

export default {
    name: 'userBorrowList',
    data() {
        return {
            admin: Cookies.get('user') ? JSON.parse(Cookies.get('user')) : {},
            data: {
                records: [],
                total: 0,
                size: 10,
                current: 1,
            },
            params: {
                pageNum: 1,
                pageSize: 10,
                bookName: '',
                bookNo: '',
                id: 1
            }
        }
    },
    created() {
        this.load();
    },
    methods: {
        load() {
            const data = Cookies.get('user');
            const obj = JSON.parse(data);
            this.params.id = obj.id;
            request.get('/borrow/userList/', {
                params: this.params
            }).then(res => {
                if (res.code === '200') {
                    this.data = res.data
                }
            })
        },
        reset() {
            this.params = {
                pageNum: 1,
                pageSize: 10,
                bookName: '',
                bookNo: ''
            }
            this.load()
        },
        handleCurrentChange(current) {
            // 点击分页按钮触发分页
            this.params.pageNum = current
            this.load()
        },
        returnBooks(row) {
            request.post("/borrow/saveRetur", row).then(res => {
                if (res.code === '200') {
                    this.$notify.success('还书成功')
                    this.load()
                } else {
                    this.$notify.error(res.msg)
                }
            })
        }
    }
}
</script>

<style scoped>

</style>
